<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/views/common/includeCommon.jsp"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<script type="text/javascript">
	var courseTemplateId = '${courseTemplateId}';
  	var fjUrl = '${fjUrl}';
  	var px1 = '${px1}';
	var py1 = '${py1}';
	var px2 = '${px2}';
	var py2 = '${py2}';
	var posId = '${posId}';
	var sfsf = '${sfsf}';
	var img_width = '${img_width}';
  	var img_height = '${img_height}';
  	var width_bl = '${width_bl}';
</script>
<!DOCTYPE html>
<html lang="en_US">
    <head>
        <title><spring:message code="app.courseTemplate.edit.title" /></title>
        <link rel="stylesheet" type="text/css" href="${ctx}/assets/jqueryplugin/jquerycrop/jquery.Jcrop.css">
        <link rel="stylesheet" type="text/css" href="${ctx}/static/css/manage/manage.jcrop.css">
        <script type="text/javascript" src="${ctx}/assets/jqueryplugin/jquery-migrate/jquery-migrate-1.4.1.js"></script>
        <script type="text/javascript" src="${ctx}/assets/jqueryplugin/jquerycrop/jquery.Jcrop.js"></script>
        <script type="text/javascript" src="${ctx}/static/js/manage/courseTemplate/jcrop_index.js"></script>
    </head>
    <body>
        <div class="div_hover">
			<!-- <input type="button" id="btnSavePostion" class="input_blue_button" value="保存"/>&nbsp;&nbsp; -->
			<input type="button" id="btnDelPostion" class="btn btn-danger btn-sm btn-delete" onclick="delCropInfo('${posId}','${attrachmentId}')" value="<spring:message code="app.common.action.delete" />"/>&nbsp;&nbsp;
			<input type="button" id="btnCancel" class="btn btn-default btn-cancel" onclick="renderEvent('${attrachmentId}')" value="<spring:message code="app.common.action.cancel" />"/>
		</div>
		<div id="playerContainer1" style="position:relative;margin-top:42px;height: 100%;">
			<img id="element_id" <c:if test="${sfsf=='true'}">width=${img_width} height=${img_height}</c:if> src="${ctx}/static/upload/courseTemplate/${fjUrl}"></img>
			<c:set var="x1"/>
			<c:set var="x2"/>
			<c:set var="y1"/>
			<c:set var="y2"/>
			<c:set var="id"/>
			
			<c:forEach items="${posList}" var="oneMap">
				<c:set var="id" value="${oneMap.id}"/>
				<c:choose>
					<c:when test="${sfsf=='true'}">
						<c:set var="x1" value="${oneMap.x1 * width_bl}"/>
						<c:set var="x2" value="${oneMap.x2 * width_bl}"/>
						<c:set var="y1" value="${oneMap.y1 * width_bl}"/>
						<c:set var="y2" value="${oneMap.y2 * width_bl}"/>
					</c:when>
					<c:otherwise>
						<c:set var="x1" value="${oneMap.x1}"/>
						<c:set var="x2" value="${oneMap.x2}"/>
						<c:set var="y1" value="${oneMap.y1}"/>
						<c:set var="y2" value="${oneMap.y2}"/>
					</c:otherwise>
				</c:choose>
				<div class="one-position1" title="weeeerrtt"
				  style="width:${x2 - x1}px;height:${y2 - y1}px;top:${y1}px;left:${x1}px" 
				  px1="${x1}" py1="${y1}" px2="${x2}" py2="${y2}" width_bl="${width_bl}"></div>
			</c:forEach>
		</div>
		
		<input type="hidden" id="x1" name="x1" />
		<input type="hidden" id="y1" name="y1" />
		<input type="hidden" id="x2" name="x2" />
		<input type="hidden" id="y2" name="y2" />
    </body>
</html>